<ion-content>
  <div class="comment-bg" [ngStyle]="tagData.cssStyle | styleFilter">
      <ng-container *ngIf="tagData.data.headDiv">
        <p [ngStyle]="tagData.data.headDiv.cssStyle | styleFilter">
          <span class="header-title" *ngIf="tagData.data.headDiv.titleNumber > 0">{{tagData.data.headDiv.titleNumber}}{{tagData.data.headDiv.title}}</span>
          <img [src]="tagData.data.headDiv.closeIcon" class="close-btn" onerror="this.src='assets/img/close.png'" appDebounceClick (debounceClick)="closeModal()" />
        </p>
      </ng-container>

      <div *ngIf="tagData.data?.headDiv?.sencondRowLeft?.firstText?.label" [ngStyle]="tagData.data?.headDiv?.sencondRowLeft?.firstText?.cssStyle | styleFilter">{{tagData.data?.headDiv?.sencondRowLeft?.firstText?.label}}</div>

      <div class="data" id="data" [ngClass]="{'noShowLoadMore': !showLoadMore}">
        <!-- 评论内容 -->
        <ng-container *ngFor="let item of tagData.data.data; let i = index">
            <div class="data-content" [ngStyle]="item.boxCssStyle | styleFilter">
                <div class="data-item">
                    <div class="img-content" [ngClass]="{'item-content-center': item.firstRowLeft?.firstText?.icon}" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.firstText.link)">
                      <img class="item-head" [src]="item.firstRowLeft?.firstText?.img+'?x-oss-process=image/resize,m_fill,h_501'" 
                      onerror="this.src='assets/img/default_img.png'" [ngStyle]="item.firstRowLeft?.firstText?.imgCssStyle | styleFilter"/>

                      <img class="item-head" [src]="item.firstRowLeft?.firstText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" *ngIf="item.firstRowLeft?.firstText?.icon"
                      onerror="this.src='assets/img/default_img.png'" [ngStyle]="item.firstRowLeft?.firstText?.iconCssStyle | styleFilter"/>
                    </div>

                    <div class="item-right-box" [ngClass]="{'noBorder': i === tagData.data.data.length - 1}" [ngStyle]="item.itemRightBoxCssStyle | styleFilter">
                        <div class="box-first">
                            <span class="box-first-name" [ngStyle]="item.firstRowLeft?.firstText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.firstText?.label}}<span [ngStyle]="item.firstRowLeft?.firstText?.tagCssStyle | styleFilter">{{item.firstRowLeft?.firstText?.tag}}</span></span>

                        </div>

                        <div class="box-thirdText" [ngStyle]="item.firstRowLeft?.thirdText?.cssStyle | styleFilter" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.thirdText.link, $event)">
                          <span *ngIf="item.firstRowLeft?.thirdText?.label" [ngStyle]="item.firstRowLeft?.thirdText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.thirdText?.label}}</span>
                          <img *ngIf="item.firstRowLeft?.thirdText?.icon" [src]="item.firstRowLeft?.thirdText?.icon" [ngStyle]="item.firstRowLeft?.thirdText?.iconCssStyle | styleFilter"/>
                        </div>

                        <div class="box-fourthText" [ngStyle]="item.firstRowLeft?.fourthText?.cssStyle | styleFilter" appDebounceClick (debounceClick)="openPage(item.firstRowLeft.fourthText.link, $event)">
                          <span *ngIf="item.firstRowLeft?.fourthText?.label" [ngStyle]="item.firstRowLeft?.fourthText?.labelCssStyle | styleFilter">{{item.firstRowLeft?.fourthText?.label}}</span>
                          <img *ngIf="item.firstRowLeft?.fourthText?.icon" [src]="item.firstRowLeft?.fourthText?.icon" [ngStyle]="item.firstRowLeft?.fourthText?.iconCssStyle | styleFilter"/>
                        </div>

                        <div>
                            <!-- 收到点赞展示的时间 -->
                            <p *ngIf="item.firstRowLeft?.secondText?.time" [ngStyle]="item.firstRowLeft?.secondText?.timeCssStyle| styleFilter">{{item.firstRowLeft?.secondText?.time}}</p>
                            <!-- 评论 -->
                            <p class="box-second" [ngStyle]="item.firstRowLeft?.secondText?.labelCssStyle | styleFilter" *ngIf="item.firstRowLeft?.secondText?.label">{{item.firstRowLeft?.secondText?.label}}<img
                              [src]="item.firstRowLeft?.secondText?.icon" *ngIf="item.firstRowLeft?.secondText?.icon" [ngStyle]="item.firstRowLeft?.secondText?.iconCssStyle | styleFilter">
                            </p>
                            <!-- 评论-图片 -->
                            <img class="box-second" [src]="item.firstRowLeft?.secondText?.image" *ngIf="item.firstRowLeft?.secondText?.image" appDebounceClick (debounceClick)="openImg(item.firstRowLeft?.secondText?.image, i)" [ngStyle]="item.firstRowLeft?.secondText?.imageCssStyle | styleFilter">
                            <!-- 时间 -->
                            <div class="box-second-value"
                                *ngIf="item.firstRowLeft?.secondText?.value" [ngStyle]="item.firstRowLeft?.secondText?.valueCssStyle| styleFilter">{{item.firstRowLeft?.secondText?.value}}
                                <div class="box-first-btn" [ngStyle]="item.firstRowRight?.boxCssStyle | styleFilter">
                                  <span class="text-btn" appDebounceClick
                                    (debounceClick)="btnClick(item.firstRowRight?.singleText, tagData.data.data, i, item.firstRowLeft?.secondText)"
                                    *ngIf="item.firstRowRight?.singleText?.label"
                                    [ngStyle]="item.firstRowRight?.firstText?.cssStyle | styleFilter">{{item.firstRowRight?.singleText?.label}}</span>
      
                                  <!-- 回复 -->
                                  <div class="btn-icon-div first-row" appDebounceClick
                                    (debounceClick)="focusTextarea(item.firstRowRight?.firstText, tagData.data.data, i, $event)">
                                    <img class="btn-icon" *ngIf="item.firstRowRight?.firstText?.icon"
                                      [ngStyle]="item.firstRowRight?.firstText?.iconCssStyle | styleFilter"
                                      [src]="item.firstRowRight?.firstText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" />
                                  
                                    <span *ngIf="item.firstRowRight?.firstText?.value"
                                      [ngStyle]="item.firstRowRight?.firstText?.valueCssStyle | styleFilter"
                                      class="btn-value">{{item.firstRowRight?.firstText?.value}}</span>

                                    <!-- 删除 -->
                                    <div appDebounceClick (debounceClick)="btnClick(item.firstRowRight?.thirdText, tagData.data.data, i, item.firstRowLeft?.thirdText)"
                                      *ngIf="item.firstRowRight?.thirdText" [ngStyle]="item.firstRowRight?.thirdText?.boxCssStyle | styleFilter">
                                      <img *ngIf="item.firstRowRight?.thirdText?.icon" [ngStyle]="item.firstRowRight?.thirdText?.iconCssStyle | styleFilter"
                                        class="btn-icon" [src]="item.firstRowRight?.thirdText?.icon+'?x-oss-process=image/resize,m_fill,h_501'" />
                                      <span *ngIf="item.firstRowRight?.thirdText?.value !== undefined" >{{item.firstRowRight?.thirdText?.value}}</span>
                                    </div>
                                  </div>
      
                                  <!-- 点赞 -->
                                  <div class="thumbs-up 1" appDebounceClick
                                    (debounceClick)="btnClick(item.firstRowRight?.secondText, tagData.data.data, i, item.firstRowLeft?.secondText)"
                                    *ngIf="item.firstRowRight?.secondText" [ngStyle]="item.firstRowRight?.secondText?.boxCssStyle | styleFilter">
                                    <img *ngIf="item.firstRowRight?.secondText?.icon && item.firstRowRight?.secondText?.icon_on"
                                      [ngStyle]="item.firstRowRight?.secondText?.iconCssStyle | styleFilter" class="btn-icon"
                                      [src]="item.firstRowRight?.secondText?.icon_status == 0 ? item.firstRowRight?.secondText?.icon : item.firstRowRight?.secondText?.icon_on" />

                                    <span *ngIf="item.firstRowRight?.secondText?.value !== undefined && item.firstRowRight?.secondText?.value > 0"
                                      class="btn-value">{{item.firstRowRight?.secondText?.value}}</span>
                                  </div>
                                </div>
                            </div>

                            <!-- 评论中的下一层评论 -->
                            <ng-container *ngIf="item.isMerchantData === undefined">
                              <ng-container *ngFor="let ite of item.firstRowLeft?.secondText?.subSecondDataSlice;let index = index;">
                                <div class="data-ite" [ngStyle]="ite.cssStyle| styleFilter">
                                  <div class="box bottom">
                                    <p class="box-first-name ite" [ngStyle]="ite.nameCssStyle| styleFilter">
                                      <img class="data-ite-img" [src]="ite.img" [ngStyle]="ite.imgCssStyle| styleFilter"
                                        onerror="this.src='assets/img/375x250@2x.png'" />{{ite.name}}
                                      <span class="tag" [ngStyle]="ite.tagCssStyle| styleFilter" *ngIf="ite.tag">{{ite.tag}}</span>
                                      <img class="delete-btn" *ngIf="ite.deleteIcon" [src]="ite.deleteIcon" [ngStyle]="ite.deleteIconCssStyle| styleFilter" 
                                        appDebounceClick (debounceClick)="del(ite, item.firstRowLeft?.secondText?.subSecondDataSlice, index)"/>
                                    </p>
                                    <div class="box-second-ite">
                                      <div [ngStyle]="ite.labelCssStyle| styleFilter">{{ite.label}}</div>
                                      <!-- 评论-图片 -->
                                      <img class="box-second" [src]="ite.image" *ngIf="ite.image" appDebounceClick (debounceClick)="openImg(ite.image, index)" [ngStyle]="ite.imageCssStyle | styleFilter">
                                      <div class="box-second-value">{{ite.value}}
                                        <!-- 回复 -->
                                        <span class="box-btn-value" *ngIf="ite.reply" appDebounceClick (debounceClick)="btnClick(ite.replyConent, item.firstRowLeft?.secondText?.subSecondDataSlice, i)">{{ite.reply}}</span>
                                        <!-- 删除 -->
                                        <span class="box-btn-value" style="margin-left: 0.5rem;" *ngIf="ite.delete" appDebounceClick (debounceClick)="btnClick(ite.deleteContent,
                                         item.firstRowLeft?.secondText?.subSecondDataSlice, index, item.firstRowLeft?.secondText)">{{ite.delete}}</span>
                                        <!-- 点赞 -->
                                        <div class="thumbs-up 0" appDebounceClick (debounceClick)="btnClick(ite.likeContent, item.firstRowLeft?.secondText?.subSecondDataSlice, index, ite)">
                                          <img *ngIf="ite.icon && ite.icon_on" class="btn-icon"
                                            [src]="ite.icon_status == 0 ? ite.icon : ite.icon_on" />
                                          <span *ngIf="ite.like !== undefined && ite.like > 0"
                                            class="btn-value">{{ite.like}}</span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </ng-container>
                              <div class="showReplies"
                                *ngIf="item.firstRowLeft?.secondText?.subSecondData.length > 1 || item.firstRowLeft?.secondText?.subSecondDataSlice?.length > 1" appDebounceClick (debounceClick)="LookReplies($event, item.firstRowLeft?.secondText, i)">
                                <span class="sep"></span>
                                {{item.firstRowLeft?.secondText?.showReplies}}
                                <img *ngIf="item.firstRowLeft?.secondText?.arrowIcon" class="footDiv-btn-icon" [src]="item.firstRowLeft?.secondText?.arrowIcon">
                              </div>
                            </ng-container>

                            <div class="secondBox" *ngIf="item.secondRowleft" [ngStyle]="item.secondRowleft.firstText?.cssStyle| styleFilter">
                                <div class="box-first-btn" [ngStyle]="item.secondRowleft.firstText?.boxCssStyle| styleFilter" appDebounceClick (debounceClick)="openPage(item.secondRowleft.link.link)">
                                  <img class="secondBox-img" [src]="item.secondRowleft.firstText?.img" [ngStyle]="item.secondRowleft.firstText?.imgCssStyle| styleFilter" onerror="this.src='assets/img/375x250@2x.png'"/>
                                  <div class="secondBox-content">
                                      <span class="box-first-name secondRowleft" [ngStyle]="item.secondRowleft.firstText?.nameCssStyle| styleFilter">{{item.secondRowleft.firstText?.name}}</span>
                                      <p class="box-second secondRowleft" [ngStyle]="item.secondRowleft.firstText?.labelCssStyle| styleFilter">{{item.secondRowleft.firstText?.label}}</p>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="item.phoneButtons" [ngStyle]="item?.phoneButtonsCssStyle|styleFilter">
                      <ng-container *ngFor="let leftBtnItem of item.phoneButtons">
                        <img *ngIf="leftBtnItem.imgUrl" class="phoneIcon" [src]="leftBtnItem.imgUrl"
                        onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_169770008904705cd0dbfef8f009f64b4ecfd5d077968.png'"
                        [ngStyle]="leftBtnItem?.btnCssStyle|styleFilter" appDebounceClick
                        (debounceClick)="btnClick(leftBtnItem)" />
                      </ng-container>
                    </div>
                </div>

                <ng-container *ngIf="item.isMerchantData !== undefined&& item.firstRowLeft?.secondText?.subSecondData&&item.firstRowLeft?.secondText?.subSecondData.length>0">
                  <div [ngStyle]="item?.expressDataCssStyle | styleFilter">
                    <ng-container *ngFor="let it of item.firstRowLeft?.secondText?.subSecondData;let in = index">
                        <div class="express" [ngStyle]="item?.expressBoxCssStyle | styleFilter">
                            <div class="express-circle" [ngStyle]="item?.expressCircleCssStyle | styleFilter">
                                <div class="top-circle-left" [ngStyle]="item?.circleCssStyle | styleFilter"></div>
                                <span class="label-left" style="height: 100%;" [ngStyle]="item?.itemCircleLineCssStyle | styleFilter"></span>
                            </div>
                            <div [ngStyle]="item?.itemContentCssStyle | styleFilter">
                              <span [ngStyle]="item?.itemTitleCssStyle | styleFilter">{{it.title}}</span>
                              <div class="top-content" [ngStyle]="item?.itemBoxCssStyle | styleFilter">
                                <span class="express-left" [ngStyle]="item?.itemTimeCssStyle | styleFilter">{{it.label}}</span>
                                <span [ngStyle]="item?.itemDescCssStyle | styleFilter">{{it.value}}</span>
                              </div>
                            </div>
                        </div>
                        <div class="bottom">
                          <div class="express-lable" [ngStyle]="item?.expressLabelCssStyle | styleFilter">
                            <span [ngStyle]="item?.borderCssStyle | styleFilter" class="label-left" [ngClass]="{'more-class' : item.expressMoreValue && in === item.firstRowLeft?.secondText?.subSecondData.length - 1}">
                              <span *ngIf="item.expressMoreValue && in === item.firstRowLeft?.secondText?.subSecondData.length - 1" style="position: relative;top: 0.25rem;"
                              appDebounceClick (debounceClick)="openPage(item.expressMoreValue.link.link)">{{item.expressMoreValue.link.label}}</span>
                            </span>
                          </div>
                        </div>
                    </ng-container>
                  </div>

                </ng-container>            
            </div>
        </ng-container>
      </div>

      <div class="footDiv" *ngIf="tagData.data?.footDiv">
        <div class="footDiv-top" [ngClass]="{'footDiv-height': !noShowFootBtn && sendLabelValue, 
          'footDiv-height-2': tagData.data.footDiv.firstRowRight.firstText.img && !sendLabelValue,
          'footDiv-height-3': tagData.data.footDiv.firstRowRight.firstText.img && sendLabelValue}">
          <!-- 文本评论 -->
          <ion-textarea class="footDiv-input" [ngClass]="{'inputWidth': noShowFootBtn === false }" type="text" maxlength="50"
            [(ngModel)]="sendLabelValue" [placeholder]="tagData.data?.footDiv?.firstRowRight?.firstText?.label" #myTextarea
            (ionChange)="ionChange($event)" (ionFocus)="ionFocus($event)" (ionBlur)="ionBlur($event)">
          </ion-textarea>
          <!-- 图片评论 -->
          <div class="img-content" *ngIf="tagData.data.footDiv.firstRowRight.firstText.img">
            <img class="comments-img" [src]="tagData.data.footDiv.firstRowRight.firstText.img" appDebounceClick (debounceClick)="openImg(tagData.data.footDiv.firstRowRight.firstText.img, index)" alt="Inserted Image">
            <div class="del-box">
              <img class="del-icon" src='../assets/fw/nav_icon_close_black@3x.png'  appDebounceClick (debounceClick)="delImg($event)"/>
            </div>
          </div>
          <!-- 选择图片 -->
          <label class="choose-img" [ngClass]="{'choss-img-position': !noShowFootBtn}" for="photo-select-{{currentTime}}">
            <input *ngIf="!isNative" id="photo-select-{{currentTime}}" type="file" accept="image/*" name="photo-select-{{currentTime}}" (change)="uploadFile($event)" style="display: none;"/>  
            <img *ngIf="!isNative" id="click-img" [src]="tagData.data.footDiv.firstRowRight?.firstText?.chooseImg" 
              onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1733901948496dfc97fb4e292e72c0e84c4f4871740c1.png'" style="width: 1rem;height: 1rem;"/>
            <img *ngIf="isNative" id="click-img" [src]="tagData.data.footDiv.firstRowRight?.firstText?.chooseImg"
              onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1733901948496dfc97fb4e292e72c0e84c4f4871740c1.png'" appDebounceClick (debounceClick)="presentAction()"  style="width: 1rem;height: 1rem;"/>
          </label>
          
        </div>
        <div class="footDiv-btn" *ngIf="!noShowFootBtn || tagData.data.footDiv.firstRowRight.firstText.img">
          <span class="btnSubmit" appDebounceClick (debounceClick)="sendLabel($event,tagData.data?.footDiv?.firstRowRight)" >发送</span>
        </div>
      </div>
      
      <p class="noData" *ngIf="!tagData.data.data || tagData.data.data.length === 0"
        [ngStyle]="tagData.hintCssStyle | styleFilter">
        <img class="noDataImg" src="../../../assets/img/no_data_img@3x.png" >
        <ng-container *ngIf="tagData.hint">
          {{tagData.hint}}
        </ng-container>
        <ng-container *ngIf="!tagData.hint">
          暂无评论，快来抢沙发吧～
        </ng-container>
      </p>

  </div>

  <ion-infinite-scroll *ngIf="showLoadMore" threshold="1%" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>


